<template>
  <div :id="id" :style="{ height: height + '%', width: width + '%' }" />
</template>
<script>
export default {
  name: 'VEChart',
  props: {
    height: {
      type: Number,
      default: 100
    },
    width: {
      type: Number,
      default: 100
    },
    options: {
      type: Object,
      default: () => {},
      required: false
    }
  },
  data() {
    return {
    }
  },
  computed: {
    // 生成一个随机id, 实现图表组件的复用
    id: function() {
      return parseInt(Math.random() * 1000000)
    }
    // legendData: function() {
    //   const legendData = []
    //   this.seriesData.forEach(function(elem) {
    //     legendData.push(elem.name)
    //   })
    //   return legendData
    // }
  },
  watch: {
    options() {
      this.renderChart()
    }
  },
  mounted() {
    this.renderChart()
  },
  updated() {
    this.renderChart()
  },
  methods: {
    renderChart: function() {
      if (this.chart) {
        this.chart.dispose()
      }
      const _this = this
      // 初始化echart
      this.chart = this.$echarts.init(document.getElementById(this.id))
      // 自定义eChart样式 官方配置指南(http://echarts.baidu.com/option.html#yAxis.splitLine.lineStyle.color)
      this.chart.setOption(this.options)
      this.chart.on('click', function(params) {
        if (params.componentType === 'series') {
          const payload = {
            value: params.value
          }
          _this.$emit('seriesClick', payload)
        }
      })
      window.addEventListener('resize', () => {
        console.log('lineresize')
        _this.chart.resize()
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
